<template>
  <div class="page">
    <div class="search">
      <entity-view formItemWidth="320px" :labelCol="{span: 8}" :wrapperCol="{span: 16}">
        <form-item label="代理商编号"/>
        <form-item label="活动状态"/>
        <form-item label="创建时间"/>
      </entity-view>
      <div class="row justify-center">
        <a-space>
          <a-button type="primary">查询</a-button>
          <a-button>重置</a-button>
        </a-space>
      </div>
    </div>
    <div class="action">
      <a-button type="primary" icon="plus" @click="add">新增</a-button>
    </div>
    <div class="content">
      <a-table :columns="tableColumns" :data-source="dataSource" :scroll="{x: true}" :pagination="pagination">
        <template v-slot:action="record">
          <a-space>
            <a-icon class="action-icon" type="play-circle" theme="twoTone" twoToneColor="#4a9ff5" title="修改"
                    @click="edit(record)"/>
            <a-icon class="action-icon" type="pause-circle" theme="twoTone" twoToneColor="#4a9ff5" title="删除"
                    @click="del(record)"/>
            <a-icon class="action-icon" type="eye" theme="twoTone" twoToneColor="#4a9ff5" title="详情"
                    @click="view(record)"/>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import EntityView from "@/components/common/entityView/EntityView";
import FormItem from "@/components/common/entityView/FormItem";

export default {
  name: "AgentManager",
  components: {
    EntityView,
    FormItem
  },
  data() {
    return {
      tableColumns: [
        {title: '优惠活动名称', dataIndex: '1'},
        {title: '营销活动编号', dataIndex: '1'},
        {title: '活动起始时间', dataIndex: '1'},
        {title: '活动终止时间', dataIndex: '1'},
        {title: '活动状态', dataIndex: '1'},
        {title: '活动审核状态', dataIndex: '1'},
        {title: '活动预算(元)', dataIndex: '1'},
        {title: '已返现金额(元)', dataIndex: '1'},
        {title: '创建人', dataIndex: '1'},
        {title: '创建时间', dataIndex: '1'},
        {
          title: '操作', fixed: 'right', key: 'operation',
          scopedSlots: {customRender: 'action'}
        }
      ],
      dataSource: [],
      pagination: {
        pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
    }
  },
  methods: {
    add() {

    },
    edit() {

    },
    del() {

    },
    view() {

    }
  }
}
</script>

<style scoped>
.page {
  width: 100%;
}

.row {
  display: flex;
  flex-direction: row;
}

.justify-center {
  justify-content: center;
}

.content {
  margin-top: 20px;
}

</style>
